<template>
<div class="page-tree">
  <el-menu
    class="text-left team-menu">
   <page-menu-tree :menus="menus"></page-menu-tree>
  </el-menu>
</div>
</template>
<script>
import PageMenuTree from './menu/PageMenuTree'
export default {
  name: 'PageTree',
  components: {PageMenuTree},
  data () {
    return {
      menus: [
        {
          id: '1',
          name: '团队项目',
          type: 'page'
        },
        {
          id: '2',
          name: '团队项目2',
          type: 'folder',
          children: [{
            id: '2-1',
            name: '团队项目2-1',
            type: 'folder',
            children: [{
              id: '2-1-1',
              name: '团队项目2-1-1',
              type: 'page'
            }, {
              id: '2-1-2',
              name: '团队项目2-1-2',
              type: 'page'
            }]
          }, {
            id: '2-2',
            name: '团队项目2-2',
            type: 'page'
          }]
        },
        {
          id: '3',
          name: '团队项目3',
          type: 'folder'
        },
        {
          id: '4',
          name: '团队项目4',
          type: 'folder'
        }
      ]
    }
  },
  methods: {
    handleNodeClick (data) {
      console.log(data)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/*.page-tree {*/
/*  height: 100%;*/
/*  width: 100%;*/
/*}*/
.page-tree .custom-tree-node{
  height: 40px;
  width: 260px;
  margin-right: 10px;
  text-align: left;
  line-height: 40px;
}

  .tree-node{
    font-size: 14px;
    color: #303133;
  }
</style>
